<template>
  <el-container>
    <el-aside width="240px">
      <el-menu
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#e4d056"
        router
        :default-active="getDefaultActive"
      >
        <GMenu :item="item" v-for="item in userMenu" :key="item.path" />
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <!-- <div class="left">-->
        <GBreadCrumb />
        <!--  </div>
        <div
          class="right"
        >-->
        <GDropDown
          @command="onCommand"
          :title="userInfo?.roleName"
          :items="commands"
        />
        <!-- </div> -->
      </el-header>
      <el-main>
        <div class="tag-box">
          <el-tag
            v-for="(tag, i) in tags"
            :key="i"
            @close="doCloseTag(tag)"
            @click="$router.push(tag)"
            closable
          >
            {{ tag.title }}
          </el-tag>
        </div>
        <!-- 不写include就是全缓存 -->
        <transition name="fade" mode="out-in">
          <keep-alive :include="getTagsName" :max="30">
            <router-view />
          </keep-alive>
          <!-- <keep-alive :include="getTagsName" :exclude="exTags" :max="30">
            <router-view />
          </keep-alive> -->
        </transition>
      </el-main>
      <el-footer>
        版权所有 金渡教育 2023
        <!-- <button @click="testToken">测试token{{ getDefaultActive }}</button> -->
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
// 适配： 百分比 + rem + flex + 媒体查询
import { mapActions, mapGetters } from 'vuex'
// import { doLogout } from '@/api/user'
import req from '@/utils/request'
export default {
  name: 'Layout',
  data() {
    return {
      commands: [
        {
          key: 'logout',
          text: '退出',
          icon: 'el-icon-plus',
        },
      ],
    }
  },
  // created() {
  //   console.log(this.$route.path)
  //   this.defaultActive = this.$route.path
  // },
  computed: {
    ...mapGetters({
      userMenu: 'user/userMenu',
      userInfo: 'user/userInfo',
      tags: 'user/getTags',
      // exTags: 'user/getExcludeCache',
      getDefaultActive: 'user/getDefaultActive',
    }),
    getTagsName() {
      return this.tags.map((t) => t.name)
    },
  },
  methods: {
    ...mapActions({
      logout: 'user/doLogoutVx',
    }),
    async onCommand(e) {
      switch (e) {
        case 'logout':
          // 发请求退出
          // let res = await doLogout();
          // console.log("res", res);

          // 2. 刷新浏览器
          // window.sessionStorage.removeItem('token');
          // window.location.reload();
          // 1. 逐个的去清空: 本地存储 vuex:userInfo Menu
          await this.logout()
          this.$router.push({
            name: 'login',
          })
      }
    },
    testToken() {
      req
        .get('/user/info')
        .then((res) => {
          console.log('res:', res)
        })
        .catch((err) => {
          console.log('err:', err)
        })
    },
    doCloseTag(tag) {
      this.$store.commit('user/removeCache', tag)
    },
  },
}
</script>

<style lang="scss" scoped>
.el-container {
  height: 100%;
}
.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-header,
.el-footer {
  background-color: #fff;
  color: #333;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.el-aside {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
.tag-box {
  text-align: left;
  margin-bottom: 10px;
  .el-tag {
    margin-right: 4px;
    cursor: pointer;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
